<template>
  <el-dialog      
      custom-class="ahc"
      append-to-body
      @close="close"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="30%">
    <div>
      <div slot="title" style="margin-bottom: 10px;font-size: 18px;">
      <span>Verify</span>
      <view-linked-info :linkKey="'verifyACH'"></view-linked-info>
    </div>
      <el-alert
          title="You have a maximum of 10 attempts to verify your payment method."
          type="warning"
          :closable="false"
          show-icon>
      </el-alert>
      <el-form label-position="top" :model="form" ref="ruleForm" :rules="formRule">
        <el-form-item label="Verification Amount 1*" prop="amount1">
          <el-input v-model="form.amount1">
            <template slot="prepend">USD</template>
          </el-input>
        </el-form-item>
        <el-form-item label="Verification Amount 2*" prop="amount2">
          <el-input v-model="form.amount2">
            <template slot="prepend">USD</template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible', false)" size="small">{{$t('cancel')}}</el-button>
      <el-button type="primary" @click="submitForm" size="small" v-loading="loading">{{$t('confirm')}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'verifyAHC',
  props: ['visible', 'ahcData'],
  data () {
    return {
      loading: false,
      form: {
        amount1: '0.00',
        amount2: '0.00'
      },
      formRule: {
        amount1: [
          { required: true, message: 'Please', trigger: 'blur' }
        ],
        amount2: [
          { required: true, message: 'Please', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    submitForm () {
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          const params = {
            sourceId: this.ahcData.id,
            amount1: Number((this.form.amount1 * 100).toFixed(0)),
            amount2: Number((this.form.amount2 * 100).toFixed(0)),
          }
          this.loading = true
          const { verifyBankAccount } = this.$interface.pay
          const { data } = await verifyBankAccount(params)
          if (data.code !== 0) {
            this.$message.error(data.msg)
          } else {
            this.dialogVisible = false
            this.$emit('verifySuccess')
          }
          this.loading = false
        } else {
          return false
        }
      })
    },
    close () {
      this.$refs['ruleForm'].resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .ahc .el-dialog__body {
  padding: 0 20px;
}
</style>
